<template>
    <div class="page-content style-page">

        <!-- buttons start -->                
        <p>            
            <div class="button-block"> <!-- 按钮居中 -->
                <a href="#" class="button button-small">关注</a>
            </div>
        </p>

        <p>
            <div class="button-block">
                <a href="#" class="button button-disabled button-small" disabled>已关注</a>
            </div>
        </p>

        <p><a href="#" class="button button-row-green">退出登录</a></p>

        <p><a href="#" class="button button-big-green">开始</a></p>

        <p><a href="#" class="button button-row-white">取消</a></p>

        <!-- buttons end -->

        <!-- 文章详情 悬浮按钮 -->
        <p><speed-dial-button-group></speed-dial-button-group></p>

        <!-- 我的收藏 -->
        <p>
            <div class="list-block">                
                <ul>
                    <li>
                        <label class="label-checkbox item-content">     
                            <div class="item-media">
                                <div class="list-img bg-orange">
                                    <i class="icon icon-folder-fill"></i>
                                </div>
                            </div>                       
                            <div class="item-inner">
                                <div class="item-title-row">
                                    <div class="item-title">文件夹名</div>
                                    <div class="item-text">描述</div>
                                </div>
                                <div class="item-after">
                                    <input type="checkbox" checked="checked">
                                    <div class="item-media">
                                        <i class="icon icon-form-checkbox"></i>
                                    </div>
                                </div>
                            </div>
                        </label>
                    </li>
                </ul>
            </div>
        </p>

        <!-- 兴趣选择 -->
        <p>      
            <div :style="{'background-color':'#fff','height':'70px','padding-top':'10px','padding-left':'15px'}">        
                <template v-for="item in checkboxColumnList">
                    <checkbox-column :item="item">
                        <img class="list-img lazy lazy-fadeIn" :data-src="item.icon" slot="list-icon" />
                    </checkbox-column>
                </template>        
            </div>
        </p>
         <!-- 兴趣选择 -->
        <p>
            <div class="list-block">                
                <ul>
                    <li class="item-content">
                        <div class="item-inner">
                            我是标题
                            <div class="item-after">
                                <label class="label-switch">
                                    <input type="checkbox">
                                    <div class="checkbox"></div>
                                </label>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </p>
         <!-- 填写信息 -->
        <p>
            <div class="list-block input-list">                
                <ul>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-input">
                                <input type="email" placeholder="E-mail" class="">
                            </div>
                            <div class="item-title label placeholder">0/15</div>
                        </div>
                    </li>
                </ul>
            </div>
        </p>
         <!-- 输入信息等 -->
         <p>
            <div class="list-block input-list">                
                <ul>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-input">
                                <textarea class=""  placeholder="E-mail"></textarea>
                            </div>
                            <div class="item-title label placeholder">0/15</div>
                        </div>
                    </li>
                </ul>
            </div>
        </p>
         <!-- 拍照&上传 -->
        <p>
            <div id="upload-img">
                <p>
                    预览图:
                    <template v-for="val in preview_image" v-if="preview_image.length">
                        <img :src="val.url" alt="">
                    </template>
                </p>
                <p>
                    上传图:
                    <template v-for="val in obj.list" v-if="obj.list.length">
                        <img :src="val.url" alt="">
                    </template>
                </p>
                
            </div>
        </p>
        <p>
            <div id="upload-wrap">
                <a href="#" id="upload-btn" class="button" @click="photoCam('upload-btn',2)">
                    拍照
                </a>
                <hr>
                <a href="#" id="upload-file" class="button" @click="photoCam('upload-file',1)">
                    选择图片
                </a>
                <hr>
                <a href="#" id="upload-begin" class="button">
                    开始上传
                </a>
                <hr>
                <a href="#" id="upload-review" class="button" >
                    查看上传图片列表
                </a>
                <hr>
            </div>
        </p>
    </div>
</template>

<script type="text/javascript">
    import store from '../store/index'
    import speedDialButtonGroup from '../components/speed-dial-button-group.vue'
    import checkboxColumn from '../components/checkbox-column.vue'

    export default{
        data() {
            return{
                checkboxColumnList:[
                    {
                        icon:'http://dev_cms_3.52tt.com/media/1030/timg.jpeg',
                        checked:true, //可选，默认 false 不选中
                        name:'javascript'
                    }
                ],
                preview_image:[],
                obj:{
                    list:[]
                }    
            }
        },
        components: {
            'speed-dial-button-group':speedDialButtonGroup,
            'checkbox-column':checkboxColumn
        },

        mounted () {

            const vue_this = this;
            store.dispatch('initQiniuToken',function(){
                vue_this.photoCam()
            })

        },

        computed: {
            store(){
                return store.state
            },
            current(){
                return store.state.current
            }
        },

        methods: {
            photoCam(upload_btn,type){
                const vue_this = this;
                const current   = vue_this.current;
                const multi_selection = false
                
                myApp.qiniuWebcam({
                    upload_btn: upload_btn?upload_btn:'upload-btn',
                    upload_start_btn: 'upload-begin',
                    upload_wrap: 'upload-wrap',
                    max_width: 720,
                    type:type?type:2,
                    multi_selection:multi_selection,
                    uptoken:current.uptoken,
                    qiniu_domain:current.domain,
                    readFileFunc: function (data){
                        // 能获取选中的图片(base64 URI)，选择多张图片时分别多次回调
                        let item = {
                            url: data
                        };
                        multi_selection ? vue_this.preview_image.push(item) 
                            : (vue_this.preview_image.splice(0,vue_this.preview_image.length,item))
                    },
                    uploadedFunc: function (url, qiniu_domain , name){
                        let obj = vue_this.obj
                        obj.list = []
                        // 能获取上传成功后的图片(七牛url的hash值，需拼接指定域前缀)与图片空间的域名，上传多张时分别多次回调
                        $$.each(url,function(index, item) {
                            obj.list.push({
                                url: item
                            });
                        });
                        multi_selection ? obj.list : obj.list.splice(0,obj.list.length-1)
                        console.log(obj)

                    }
                });
            }
        }

    }
</script>

<style lang="less" scope>
  @import url('../../assets/less/style.less');
    .style-page{
        // background-color: white;
        .bg-orange{
            background-color: orange;
        }
        .icon-folder-fill{
            background-size: 27px 32px;
            width: 40px;
            height: 40px;
            .icon-folder-fill(white);
        }
    }
</style>
